<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{title}}</title>
    <link rel="stylesheet" href="/css/styles.css">
    <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🔐</text></svg>">
</head>
<body>
    <header>
        <div class="container">
            <div class="header-content">
                <a href="/" class="logo">MSAL Express Sample</a>
                
                <nav>
                    <ul>
                        <li><a href="/" class="nav-link spa-link">Home</a></li>
                        <li><a href="/profile" class="nav-link spa-link" data-auth-required style="display: none;">Profile</a></li>
                        <li>
                            <div class="dropdown version-switcher">
                                <button id="versionButton" class="btn btn-version dropdown-toggle" title="Switch MSAL Version" style="display: none;">
                                    <span class="version-icon">📦</span>
                                    <span id="currentVersionText">{{envConfig.version.info.name}}</span>
                                    <span class="dropdown-arrow">▼</span>
                                </button>
                                <div id="versionDropdown" class="dropdown-menu version-menu">
                                    <!-- Version options will be populated by JavaScript -->
                                </div>
                            </div>
                        </li>
                    </ul>
                </nav>
                
                <div class="auth-section">
                    <div class="user-info" data-auth-required style="display: none;">
                        Welcome, <span data-user-name></span>!
                    </div>
                    
                    <div data-unauth-required>
                        <div class="dropdown">
                            <button id="signInButton" class="btn dropdown-toggle" style="display: none;">
                                Login
                                <span class="dropdown-arrow">▼</span>
                            </button>
                            <div id="signInDropdown" class="dropdown-menu">
                                <a href="#" id="signInPopup" class="dropdown-item">Sign in using Popup</a>
                                <a href="#" id="signInRedirect" class="dropdown-item">Sign in using Redirect</a>
                            </div>
                        </div>
                    </div>
                    
                    <div data-auth-required style="display: none;">
                        <div class="dropdown">
                            <button id="accountButton" class="btn btn-account dropdown-toggle">
                                <span class="account-icon">👤</span>
                                <span class="dropdown-arrow">▼</span>
                            </button>
                            <div id="accountDropdown" class="dropdown-menu">
                                <a href="#" id="switchAccount" class="dropdown-item">Switch Account</a>
                                <a href="#" id="signOutPopup" class="dropdown-item">Logout using Popup</a>
                                <a href="#" id="signOutRedirect" class="dropdown-item">Logout using Redirect</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <main>
        <div class="container">
            <div id="error-message" class="message error-message"></div>
            <div id="success-message" class="message success-message"></div>
            
            <!-- SPA Content Area -->
            <div id="spa-content">
                {{{body}}}
            </div>
            
            <!-- Loading indicator for SPA navigation -->
            <div id="spa-loading" class="loading" style="display: none;">
                Loading page content...
            </div>
        </div>
    </main>

    <footer>
        <div class="container">
            <p>&copy; 2025 Microsoft. This sample demonstrates MSAL.js with Express.js</p>
        </div>
    </footer>

    <!-- Account Picker Modal -->
    <div id="accountPickerModal" class="modal" style="display: none;">
        <div class="modal-content">
            <div class="modal-header">
                <h2>Set active account</h2>
                <span class="modal-close">&times;</span>
            </div>
            <div class="modal-body">
                <div id="accountList" class="account-list">
                    <!-- Accounts will be populated here -->
                </div>
            </div>
        </div>
    </div>

    <!-- Custom Version Modal -->
    <div id="customVersionModal" class="modal" style="display: none;">
        <div class="modal-content">
            <div class="modal-header">
                <h2>Specify Custom MSAL Version</h2>
                <span class="modal-close">&times;</span>
            </div>
            <div class="modal-body">
                <div class="custom-version-form">
                    <div class="form-group">
                        <label for="customVersionInput">Version Number:</label>
                        <input 
                            type="text" 
                            id="customVersionInput" 
                            class="form-input" 
                            placeholder="e.g., 4.0.0, 3.5.1-beta, 2.38.0"
                        >
                        <div class="input-help">
                            Enter a semantic version number (major.minor.patch). 
                            Pre-release versions can include suffixes like -beta, -alpha.
                        </div>
                        <div id="customVersionError" class="error-text" style="display: none;"></div>
                    </div>
                    
                    <div class="form-actions">
                        <button id="customVersionCancel" class="btn btn-secondary">Cancel</button>
                        <button id="customVersionSubmit" class="btn btn-primary">Switch to Version</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Inject environment configuration -->
    <script>
        window.envConfig = {{{json envConfig}}};
        window.currentMsalVersion = '{{envConfig.version.current}}';
    </script>
    
    <!-- MSAL Browser library - dynamically loaded based on version -->
    <script id="msal-script" src="{{envConfig.version.info.path}}"></script>
    
    <!-- Version Switcher Script (load before app scripts) -->
    <script src="/js/versionSwitcher.js"></script>
    
    <!-- Application module scripts (ES6 modules) -->
    <script type="module" src="/js/authConfig.js"></script>
    <script type="module" src="/js/app.js"></script>
</body>
</html>
